<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }">
						<image src="../../static/jt6.png" @click="back()"></image>
						<view class="navbar-search">商城</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
				<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
			</view>
			<!-- 搜索框 -->
			<view class="searchbox">
				<view class="inputbox">
					<image src="../../static/ss.png" @click="tosearch()"></image>
					<input v-model="keyword" placeholder="搜索商品" maxlength="28" />
				</view>
				<image src="../../static/gwc1.png" @click="tocar()"></image>
			</view>
			<!-- 轮播图 -->
			<view class="swiperbox" v-if="adlist.length">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
					<swiper-item class="swiper-item" v-for="(item, index) in adlist" :key="index">
						<image :src="item.img"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="classify">
				<view class="classitem" v-for="(item,index) in catelist.slice(0,4)" :key="index" @click="handlecate(item,index)">
					<image :src="item.cate_logo"></image>
					<view>{{item.cate_name}}</view>
				</view>
			</view> -->
		</view>
		<view class="box" v-if="goodsList.length || yxList.length">
			<view class="leftbox" @click="topage(1)" v-if="goodsList.length">
				<view class="titlebox">
					<view>热门推荐</view>
					<image src="../../static/fire.png"></image>
				</view>
				<view class="imgbox">
					<image :src="goodsList[0].url"></image>
					<image :src="goodsList[1].url"></image>
				</view>
			</view>
			<view class="leftbox" @click="topage(2)" v-if="yxList.length">
				<view class="titlebox">
					<view>严选好物</view>
					<view class="titimg"> 疯狂种草 </view>
				</view>
				<view class="imgbox">
					<image :src="yxList[0].url"></image>
					<image :src="yxList[1].url"></image>
				</view>
			</view>
		</view>
		<view class="integralbox" v-if="scoreList.length">
			<view class="titlebox">
				<view>积分兑购</view>
				<view class="rightbox" @click="toscore()">
					<view>积分当钱花</view>
					<image src="../../static/jt5.png"></image>
				</view>
			</view>
			<view class="integralgoods">
				<view class="integralitem" v-for="(item, index) in scoreList.slice(0, 4)" :key="index" @click="todetail(item)">
					<image :src="item.url"></image>
					<view>{{ item.goods_price_min }}<text style="font-size: 24rpx">积分</text></view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20rpx"></view>
		<goods :list="list" type="horizontal"></goods>

		<!-- <tarbar :actbar="actbar"></tarbar> -->
	</view>
</template>

<script>
// import tarbar from '../../components/tabbar.vue'
import goods from "../../components/Hintegralgoods.vue"
export default {
	components: {
		goods,
	},
	data() {
		return {
			// actbar: 1,
			statusBarHeight: 20,
			/* 状态栏高度 */
			navBarHeight: 45,
			/* 导航栏高度 */
			windowWidth: 375,
			/* 窗口宽度 */
			/* 设定状态栏默认高度 */
			typelist: ["初级", "中级", "高级"],
			typeindex: 0,
			scoreList: [],
			adlist: [],
			goodsList: [],
			list: [],
			yxList: [],
			catelist: [],
			keyword: "",
			loading: false,
			isEnd: false,
		}
	},
	onLoad() {
		this.getindex()
		this.getcate()
		this.getnav()
		this.getList()
	},
	methods: {
		async getList() {
			if (this.loading || this.isEnd) return
			this.loading = true
			uni.showLoading({})
			let { data } = await this.$http({
				url: "/api/Wechat/getGoodsByCateId",
				data: {
					page: 1,
					limit: 12,
					cate_id: "",
				},
			})
			uni.hideLoading()
			this.list = [...this.list, ...data]
			this.isEnd = data.length < 12
			this.loading = false
		},
		getnav() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo)
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		changetype(item, index) {
			this.typeindex = index
		},
		getindex() {
			this.$http({
				url: "/api/Wechat/index",
			}).then((res) => {
				this.scoreList = res.data.scoreList
				this.adlist = res.data.adlist
				this.goodsList = res.data.goodsList
				// this.list = res.data.List
				this.yxList = res.data.yxList
			})
		},
		getcate() {
			this.$http({
				url: "/api/Wechat/cateList",
			}).then((res) => {
				this.catelist = res.data.slice(0, 3)
				this.catelist.push({
					cate_logo: "../../static/qb.png",
					cate_name: "全部",
					id: "",
				})
			})
		},
		handlecate(item, index) {
			if (index == 3) {
				uni.navigateTo({
					url: "/pageshop/classify/classify?id=" + item.id,
				})
			} else {
				uni.navigateTo({
					url: "/pageshop/searchgoods/searchgoods?name=" + item.cate_name + "&id=" + item.id,
				})
			}
		},
		topage(n) {
			//n==1为热门，2为严选
			if (n == 1) {
				uni.navigateTo({
					url: "/pageshop/hotrecommend/hotrecommend",
				})
			} else {
				uni.navigateTo({
					url: "/pageshop/strictgoods/strictgoods",
				})
			}
		},
		tosearch() {
			this.keyword = ""
			uni.navigateTo({
				url: "/pageshop/searchgoods/searchgoods?keyword=" + this.keyword,
			})
		},
		todetail(item) {
			uni.navigateTo({
				url: "/pageshop/goodsinfo/goodsinfo?id=" + item.id,
			})
		},
		tocar() {
			uni.navigateTo({
				url: "/pageshop/shoppingCart/shoppingCart",
			})
		},
		toscore() {
			uni.navigateTo({
				url: "/pageshop/scoregoods/scoregoods",
			})
		},
		back() {
			uni.navigateBack({
				delta: 1,
			})
		},
	},
}
</script>

<style lang="scss">
.header {
	// height: 764rpx;
	background: url($uni-url + "/shop.png") no-repeat;
	width: 100%;
	background-size: 100% 764rpx;
}

.navbar {
	.navbar-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 399;
		width: 100%;
		// height: 102rpx;
		// padding-bottom: 20rpx;
		background: transparent;

		.navbar-content {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0rpx 30rpx;
			// height: 142rpx;
			box-sizing: border-box;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}

			.navbar-search {
				display: flex;
				align-items: center;
				// padding: 0 10px;
				width: 100%;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1a1a1a;
				// position: absolute;
				// left: 50%;
				// transform: translate(-50%,0);
			}
		}
	}
}

.searchbox {
	width: 690rpx;
	padding: 0 30rpx;
	height: 134rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	image {
		width: 45rpx;
		height: 46rpx;
	}

	.inputbox {
		width: 556rpx;
		padding: 0 30rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 36rpx;
		display: flex;
		align-items: center;

		> input {
			width: 500rpx;
		}

		image {
			width: 33rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
	}
}

.swiperbox {
	width: 690rpx;
	margin: 0 auto;
	.swiper {
		height: 250rpx;
		.swiper-item {
			display: block;
			height: 250rpx;
			line-height: 250rpx;
			text-align: center;
			image {
				height: 250rpx;
			}
		}
	}
}
.classify {
	display: flex;
	align-items: center;
	width: 690rpx;
	margin: 0 auto;
	.classitem {
		width: 25%;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		image {
			width: 90rpx;
			height: 90rpx;
			margin: 48rpx 0 15rpx 0;
			border-radius: 8rpx;
		}
	}
}
.box {
	height: 212rpx;
	background: url($uni-url + "/shop1.png") no-repeat;
	width: 690rpx;
	background-size: 690rpx 212rpx;
	margin: 10rpx auto 0 auto;
	display: flex;
	.leftbox {
		width: 305rpx;
		padding: 0 20rpx;
		.titlebox {
			display: flex;
			align-items: center;
			height: 70rpx;
			image {
				width: 26rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
			.titimg {
				height: 32rpx;
				background: url($uni-url + "/shop3.png") no-repeat;
				width: 120rpx;
				background-size: 120rpx 32rpx;
				font-size: 22rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
				line-height: 32rpx;
				// text-align: center;
				text-indent: 4px;
				margin-left: 10rpx;
			}
		}
		.imgbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			image {
				width: 125rpx;
				height: 125rpx;
				margin: 0 10rpx;
			}
		}
	}
}
.integralbox {
	height: 330rpx;
	background: url($uni-url + "/shop2.png") no-repeat;
	width: 690rpx;
	background-size: 690rpx 330rpx;
	margin: 40rpx auto;
	.titlebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 650rpx;
		margin: 0 auto;
		height: 70rpx;
		font-size: 36rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #ffffff;
		.rightbox {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}
		}
	}
	.integralgoods {
		width: 650rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		.integralitem {
			width: 25%;
			text-align: center;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #f94d29;
			image {
				width: 160rpx;
				height: 160rpx;
				margin: 10rpx 0;
			}
		}
	}
}
</style>
